<template>
	<view class="box">
		<view class="biaoti">
			<text v-for="(a,y) in bizhong" :key="y" :index="y" :class="{'selected' : y == selected}" @click="select(y)">{{a}}</text>
		</view>
		
		<swiper :current="selected" @change="current">
			<swiper-item>
				<view class="swiper-item">
					<ChargeMoney-TRC20></ChargeMoney-TRC20>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<ChargeMoney-ERC20></ChargeMoney-ERC20>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import TRC20s from '../../components/ChargeMoney-TRC20/ChargeMoney-TRC20.vue'
	 import ERC20s from '../../components/ChargeMoney-ERC20/ChargeMoney-ERC20.vue'
	export default {
		components:{
			TRC20s,
			ERC20s
		},
		data() {
			return {
				bizhong:['TRC20','ERC20'],
				selected:0
			}
		},
		methods: {
			select(x) {
				this.selected = x
			},
			current(e) {
				this.selected = e.detail.current
			},
		}
	}
</script>
<style>
	page{
		background-color: #F3F3F3;
	}
</style>
<style scoped>
	.biaoti{
		padding-top: 60rpx;
		display: flex;
		justify-content: space-evenly;
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		font-weight: bold;
		color: #999999;
	}
	swiper{
		height: 88.36vh;
	}
.selected{
			color: #000000;
			border-bottom: 6rpx solid #005FDB;
		}
</style>
